<template>
	<view>
		<view class="lutong-tong" style="background-image: url('../../static/lutong.png');">
			<view class="lutong-adress">
				<view class="lutong-adress-left">
					烟台市 
					<image class="lutong-adress-img" src="../../static/images/lutong/Frame59@3x.png" mode=""></image>
				</view>
				<view class="lutong-adress-center">
					<image class="lutong-adress-img" src="../../static/images/lutong/Group42@3x.png" mode=""></image>
				</view>
				<view class="lutong-adress-right">
					<image class="lutong-adress-img" src="../../static/images/lutong/Frame62@3x.png" mode=""></image>
				</view>
			</view>
			<view class="lutong-code">
				<view class="lutong-time">
					{{ nian}}
					{{ri}}
				</view>
				<view class="lutong-change">
					切换展示条形码 <image class="lutong-change-img" src="../../static/images/lutong/Group37@3x.png" mode=""></image>
				</view>
				<view class="qrcode">
					<image class="qrcode-img" src="../../static/images/lutong/image1@3x.png" mode="widthFix"></image>
				</view>
				<view class="refresh">
					<image class="refresh-img" src="../../static/images/lutong/Frame@3x.png" mode=""></image>
					<span class="refresh-text" @click="aa">当即使用，每分钟自动刷新</span>
				</view>
				<view class="user-info">
					<view class="user-name">
						<span v-show="showInfo=='0'">{{xingInfo.real_name}} </span>
						<span v-show="showInfo=='1'">{{info.real_name}} </span>
						<image class="user-name-img" src="../../static/images/lutong/Frame@3x(1).png" mode="" v-show="showInfo=='0'" @click="biFn(0)"></image>
						<image class="user-name-img1" src="../../static/images/lutong/open.png" mode="" v-show="showInfo=='1'" @click="biFn(1)"></image>
					</view>
					<view class="user-id">
						<span v-show="showInfo=='0'">{{xingInfo.card}}</span>
						<span v-show="showInfo=='1'">{{info.card}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<image class="content-img" src="../../static/images/lutong/Frame1@3x.png" mode="widthFix"></image>
		</view>
		<custom-tabbar :curr-page="2" />
	</view>
</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { onMounted, ref, onBeforeUnmount } from 'vue';
	import customTabbar from "@/components/custom-tabbar.vue"
import { getUserInfo,getMarryInfo,getMarryInfoList,getHourseInfo,getFanwei,getTip,getTable } from '@/api/user'
	let nowtime = ref();
	const showInfo=ref('0')
	const nian=ref('')
	const ri=ref('')
	const getTime = () => {
	  let date1 = new Date();
	  let year = date1.getFullYear();
	  let month = date1.getMonth();
	  let day = date1.getDate();
	  let xinqi = date1.getDay();
	  // let hh = date1.getHours();
	  let hh = date1.getHours()< 10 ? '0' + date1.getHours() : date1.getHours();
	  // let mm = date1.getMinutes();
	  let mm = date1.getMinutes()< 10 ? '0' + date1.getMinutes() : date1.getMinutes();
	  let ss = date1.getSeconds() < 10 ? '0' + date1.getSeconds() : date1.getSeconds();
	  //let date = year + "年" + (month + 1) + "月" + day + "日   星期" + xinqi + "  " + hh + ":" + mm + ":" + ss
	  let date = year + '-' + (month + 1) + '-' + day + '';
	  //let  week = "星期" +xinqi //星期6
	  let realTime = hh + ':' + mm + ':' + ss;
	  nian.value=date;
	  ri.value=realTime
	};
	
	 onMounted(() => {
	   //启动定时器
	   
	   nowtime.value = setInterval(() => {
	     getTime();
	   }, 1000);
	 });
	 onShow(()=>{
		 getinfo()
	 })
	 onBeforeUnmount(() => {
	   // 在组件消费前，销毁定时器
	   clearInterval(nowtime.value);
	 });
	 
	 
	const info=ref({})
	const xingInfo=ref({})
	const getinfo=async()=>{
		const data=await getUserInfo()
		info.value=data
		xingInfo.value.real_name=formatName(data.real_name)
		xingInfo.value.card=formatShen(data.card)
	}
	
	
	const biFn=(aa)=>{
			
		if(aa==0){
			showInfo.value='1'
		}
		if(aa==1){
			showInfo.value='0'
		}
			
		
	}
	
	const getaa=()=>{
		let card=info.value.card
		console.log(card);
		getFanwei({card:card}).then(res=>{
			// pdfimg.value=res.shuju
			console.log(res,'222222222222222');
		})
	}
	const aa=()=>{
		// getHourseInfo({card:info.value.card,fanwei:'烟台福山区',quhao:'77'}).then(res=>{
		// 	console.log(res,'res');
		// })
		// getTip().then(res=>{
		// 	console.log(res,'ttttttttttttttttttt');
		// })
		// getFanwei()
		// getMarryInfo({number_w:'',number_m:info.value.card}).then(res=>{
		// 	console.log(res,'男男');
		// 	if (res.data == 1) {
		// 		// uni.navigateTo({
		// 		// 	url: '/pages/marriageregistration/queryfailed'
		// 		// })
		// 	} else {
		// 		// uni.navigateTo({
		// 		// 	url: '/pages/marriageregistration/querysuccessful'
		// 		// })
		// 	}
		// })
		let card=info.value.card
		console.log('啦啦啦阿联');
		getTable({card:card}).then(res=>{
			table1.value=res
			console.log(res,'33333333');
		})
	}
	// 星号
	const formatName=(str)=>{
		 return new Array(str.length).join('*') + str.substr(-1);
	}
	
	const formatShen=(str)=>{
		return str[0]+'****************'+str[str.length-1]
	}
</script>

<style lang="scss" scoped>
.lutong-tong{
	width: 100%;
	height: 1200rpx;
	background-size: 100% 100%;
	position: relative;
	.lutong-adress{
		position: absolute;
		top: 105rpx;
		width: 90%;
		margin-left: 5%;
		display: flex;
		justify-content: space-between;
		
		.lutong-adress-left{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			width: 80%;
			.lutong-adress-img{
				width: 25rpx;
				height:25rpx;
			}
		}
		.lutong-adress-center{
			width: 10%;
			.lutong-adress-img{
				width: 40rpx;
				height:40rpx;
				vertical-align: middle;
			}
		}
		.lutong-adress-right{
			width: 10%;
			margin-left: auto;
			.lutong-adress-img{
				width: 40rpx;
				height:40rpx;
				vertical-align: middle;
			}
		}
	}
	.lutong-code{
		width: 90%;
		margin-left: 5%;
		height: 964rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		opacity: 1;
		position: absolute;
		top: 210rpx;
		
		.lutong-time{
			margin-top: 56rpx;
			text-align: center;
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #202020;
		}
	}
	.lutong-change{
		text-align: center;
		margin-top: 12rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #42B5FF;
		vertical-align: middle;
		.lutong-change-img{
			height: 30rpx;
			width: 30rpx;
			margin-left: 14rpx;
			vertical-align: middle;
		}
	}
	.qrcode{
		width: 70%;
		margin-left: 15%;
		margin-top: 40rpx;
		.qrcode-img{
			width: 100%;
		}
	}
	.refresh{
		width: 60%;
		margin-left: 20%;
		height: 64rpx;
		background: #EDFCF7;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		opacity: 1;
		line-height: 64rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #00C686;
		margin-top: 58rpx;
		.refresh-img{
			width: 24rpx;
			height: 26rpx;
			vertical-align: middle;
			
		}
		.refresh-text{
			display: inline-block;
			padding-top: 3rpx;
			padding-left: 5rpx;
		}
	}
	.user-info{
		margin-top: 48rpx;
		text-align: center;
		.user-name{
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #202020;
			.user-name-img{
				padding-left: 20rpx;
				width: 34rpx;
				height: 34rpx;
			}
			.user-name-img1{
				padding-left: 20rpx;
				width: 40rpx;
				height: 30rpx;
			}
		}
		.user-id{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #777777;
			margin-top: 8rpx;
		}
	}
	
}
.content{
	// margin-top: 500rpx;
	.content-img{
		width: 100%;
	}
}


</style>
